﻿<%@tag language="java" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@attribute name="customheadcss" fragment="true" %>
<%@attribute name="customheadjs" fragment="true" %>
<%@attribute name="customfootcss" fragment="true" %>
<%@attribute name="customfootjs" fragment="true" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Metis</title>
    <script type="text/javascript">var appRoot = "<%=path %>/";</script>
    <!--Mobile first-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--IE Compatibility modes-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-TileColor" content="#5bc0de">
    <meta name="msapplication-TileImage" content="<%=path %>/assets/img/metis-tile.png">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="<%=path %>/assets/lib/bootstrap/css/bootstrap.min.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="<%=path %>/assets/lib/Font-Awesome/css/font-awesome.min.css">

    <!-- Metis core stylesheet -->
    <link rel="stylesheet" href="<%=path %>/assets/css/main.min.css">
    <link rel="stylesheet" href="<%=path %>/assets/css/theme.css">
    <jsp:invoke fragment="customheadcss" />
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>
    <script src="<%=path %>/assets/lib/html5shiv/html5shiv.js"></script>
    <script src="<%=path %>/assets/lib/respond/respond.min.js"></script>
    <![endif]-->

    <!--Modernizr 3.0-->
    <script src="<%=path %>/assets/lib/modernizr-build.min.js"></script>

    <jsp:invoke fragment="customheadjs" />
</head>
<body>
<div id="wrap">
    <div id="top">

        <!-- .navbar -->
        <nav class="navbar navbar-inverse navbar-static-top">

            <!-- Brand and toggle get grouped for better mobile display -->
            <header class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="index.html" class="navbar-brand">
                    <img src="<%=path %>/assets/img/logo.png" alt="">
                </a>
            </header>
            <div class="topnav">
                <div class="btn-toolbar">
                    <div class="btn-group">
                        <a data-placement="bottom" data-original-title="Fullscreen" data-toggle="tooltip"
                           class="btn btn-default btn-sm" id="toggleFullScreen">
                            <i class="glyphicon glyphicon-fullscreen"></i>
                        </a>
                    </div>
                    <div class="btn-group">
                        <a data-placement="bottom" data-original-title="Show / Hide Sidebar" data-toggle="tooltip"
                           class="btn btn-success btn-sm" id="changeSidebarPos">
                            <i class="fa fa-expand"></i>
                        </a>
                    </div>
                    <div class="btn-group">
                        <a data-placement="bottom" data-original-title="E-mail" data-toggle="tooltip"
                           class="btn btn-default btn-sm">
                            <i class="fa fa-envelope"></i>
                            <span class="label label-warning">5</span>
                        </a>
                        <a data-placement="bottom" data-original-title="Messages" href="#" data-toggle="tooltip"
                           class="btn btn-default btn-sm">
                            <i class="fa fa-comments"></i>
                            <span class="label label-danger">4</span>
                        </a>
                    </div>
                    <div class="btn-group">
                        <a data-placement="bottom" data-original-title="Document" href="#" data-toggle="tooltip"
                           class="btn btn-default btn-sm">
                            <i class="fa fa-file"></i>
                        </a>
                        <a data-toggle="modal" data-original-title="Help" data-placement="bottom"
                           data-target="#helpModal" class="btn btn-default btn-sm" href="/resource/gettree">
                            <i class="fa fa-question"></i>
                        </a>
                    </div>
                    <div class="btn-group">
                        <a href="/j_spring_security_logout" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom"
                           class="btn btn-metis-1 btn-sm">
                            <i class="fa fa-power-off"></i>
                        </a>
                    </div>
                </div>
            </div>
            <!-- /.topnav -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <!-- .nav -->
                <ul class="nav navbar-nav">
                    <li><a href="dashboard.html">Dashboard</a></li>
                    <li><a href="table.html">Tables</a></li>
                    <li><a href="file.html">File Manager</a></li>
                    <li class='dropdown '>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Form Elements
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="form-general.html">General</a></li>
                            <li><a href="form-validation.html">Validation</a></li>
                            <li><a href="form-wysiwyg.html">WYSIWYG</a></li>
                            <li><a href="form-wizard.html">Wizard &amp; File Upload</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- /.nav -->
            </div>
        </nav>
        <!-- /.navbar -->

        <!-- header.head -->
        <header class="head">
            <div class="search-bar">
                <a data-original-title="Show/Hide Menu" data-placement="bottom" data-tooltip="tooltip"
                   class="accordion-toggle btn btn-primary btn-sm visible-xs visible-sm" id="menu-toggle">
                    <i class="fa fa-bars"></i>
                </a>

                <form class="main-search">
                    <div class="input-group">
                        <input type="text" class="input-small form-control" placeholder="Live Search ...">
                <span class="input-group-btn">
                    <button class="btn btn-primary btn-sm text-muted" type="button"><i class="fa fa-search"></i>
                    </button>
                </span>
                    </div>
                </form>
            </div>

            <!-- ."main-bar -->
            <div class="main-bar">
                <h3>
                    <i class="fa fa-home"></i>Metis</h3>
            </div>
            <!-- /.main-bar -->
        </header>

        <!-- end header.head -->
    </div>
    <!-- /#top -->
    <div id="left">
        <div class="media user-media">
            <div class="user-media-toggleHover">
                <span class="fa fa-user"></span>
            </div>
            <div class="user-wrapper">
                <a class="user-link" href="">
                    <img class="media-object img-thumbnail user-img" alt="User Picture"
                         src="<%=path %>/assets/img/user.gif">
                    <span class="label label-danger user-label">16</span>
                </a>

                <div class="media-body">
                    <h5 class="media-heading">Archie</h5>
                    <ul class="list-unstyled user-info">
                        <li><a href="">Administrator</a></li>
                        <li>Last Access :
                            <br>
                            <small>
                                <i class="fa fa-calendar"></i>&nbsp;16 Mar 16:32
                            </small>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- #menu -->
        <jsp:include page="/menu.do?url=${requestScope.requesturl}"></jsp:include>
        <!-- /#menu -->
    </div>
    <!-- /#left -->
    <div id="content">
        <div class="outer">
            <div class="inner">
                <!-- BEGIN PAGE -->
                <jsp:doBody />
                <!-- END PAGE -->
            </div>
        </div>
        <!-- end .outer -->
    </div>

    <!-- end #content -->
</div>
<!-- /#wrap -->
<div id="footer">
    <p>2013 &copy; Admin</p>
</div>

<!-- #helpModal -->
<div id="helpModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <p>
                   model body
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal --><!-- /#helpModal -->
<script src="<%=path %>/assets/lib/jquery.min.js"></script>
<script src="<%=path %>/assets/lib/bootstrap/js/bootstrap.min.js"></script>
<jsp:invoke fragment="customfootjs" />
<script src="<%=path %>/assets/lib/screenfull/screenfull.js"></script>
<script src="<%=path %>/assets/js/main.min.js"></script>
<jsp:invoke fragment="customfootcss" />
<!--For Demo Only. Not required -->
<script type="text/javascript" src="<%=path %>/assets/js/style-switcher.js"></script>
</body>
</html>